<!-- 
    说明：招聘企业-职位详情
 -->
<template>
  <div>
    <PageCom class="pc_show_page">
      <section class="pc-review-page">
        <div class="nav-com">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'hire' }">招聘专区</el-breadcrumb-item>
            <el-breadcrumb-item :repalce="true" :to="{ name: 'company', query: { id: $route.query.companyId } }"
              v-if="$route.query.companyId">企业详情</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'jobList' }" v-else>职位列表</el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{ $route.meta.title || "--" }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 公司基本信息 -->
        <div class="job-info">
          <div class="row1">
            <div class="left">
              <div class="row1-1">
                <span class="title">{{ jobInfo.jobName }}</span>
                <span class="strong">{{ jobInfo.lowestSalary || 0 }}-{{
                  jobInfo.highestSalary || 0
                }}元/天</span>
                <span class="normal">招聘人数：{{ jobInfo.recruitmentCount || 0 }}</span>
                <span class="normal">工作语言：{{ jobInfo.jobLanguage || "中文" }}</span>
              </div>
              <div class="t_row2 row2">
                <span class="normal">招聘人数：{{ jobInfo.recruitmentCount || 0 }}</span>
                <span class="normal">工作语言：{{ jobInfo.jobLanguage || "中文" }}</span>
              </div>
              <div class="row2">
                <span v-if="jobInfo.city">{{ jobInfo.city }}</span>
                <span class="line" v-if="jobInfo.practicePeriod || jobInfo.workPeriod" />
                <span v-if="jobInfo.practicePeriod">{{ jobInfo.practicePeriod }}个月</span>
                <span class="line" v-if="jobInfo.workPeriod" />
                <span v-if="jobInfo.workPeriod">{{ jobInfo.workPeriod }}</span>
                <span class="line" v-if="jobInfo.education" />
                <span v-if="jobInfo.education">{{ jobInfo.education }}</span>
                <span class="line" v-if="jobInfo.identify"></span>
                <span v-if="jobInfo.identify">{{
                  ["在校", "应届"][jobInfo.identify]
                }}</span>
              </div>
              <div class="row3">
                <div class="tag" v-for="(item, index) in jobInfo.welfareTags" :key="index">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="right-hire">
              <div class="t_strong strong">{{ jobInfo.lowestSalary || 0 }}-{{
                jobInfo.highestSalary || 0
              }}元/天</div>
              <div class="row1">发布时间：{{ jobInfo.updateTime }}</div>
              <div class="row2">点击量：{{ jobInfo.clickCount }}</div>
              <div class="collectStatus" @click="changeCollectStatus">
                <img src="../../assets/images/collection.png" v-if="!collectStatus" />
                <img src="../../assets/images/collection_active.png" v-else />
                <span v-if="!collectStatus">收藏</span>
                <span v-else style="color: #fc9c21">收藏中</span>
              </div>
            </div>
          </div>

          <div class="row4">
            <img class="logo" :src="companyInfo.companyLogo" v-imgError alt="logo" />
            <div class="right-block" @click="linkTo('company', jobInfo.companyId)">
              <div class="name">{{ companyInfo.companyName }}</div>
              <div class="area">{{ companyInfo.industry }}</div>
            </div>
        </div>

          <!-- <div class="btn edit" @click="toLink('resumeEdit')">
                <span class="edit-icon"></span>填写简历
              </div> -->
          <div class="btn send" :class="[isSend ? 'disabled' : '']" @click="showZzc">
            <span class="send-icon"></span>{{ isSend ? "您已投递" : "投递简历" }}
          </div>
        </div>
        <div class="t_btn_box">
          <div class="t_btn t_send" :class="[isSend ? 'disabled' : '']" @click="showZzc">
            <span class="t_send-icon"></span>{{ isSend ? "您已投递" : "投递简历" }}
          </div>
        </div>

        <section>

          <!-- 职位描述 -->
          <div class="row-item">
            <div class="title">职位描述 <span class="t_row1 row1">发布时间：{{ jobInfo.updateTime }}</span></div>
            <div class="t_row3 row3">
              <div class="tag" v-for="(item, index) in jobInfo.welfareTags" :key="index">
                {{ item }}
              </div>
            </div>
            <div class="company-desc" v-if="jobInfo.jobDescription"
              v-html="jobInfo.jobDescription.replace(/\n/gm, '<br>')">
            </div>
          </div>
          <!-- 平台简介 -->
          <div class="row-item">
            <div class="title">{{ jobInfo.companyName }}简介</div>
            <div class="company-desc" v-if="companyInfo.introduction"
              v-html="companyInfo.introduction.replace(/\n/gm, '<br>')"></div>
            <!-- todo 点击安全提示，跳转防骗指南 -->
            <div class="safe-tips">
              <div class="title">安全提示</div>
              <div class="text">
                数据学徒实习平台严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股、诱导求职者异地入职、异地参与培训等，如您一旦发现此类行为，
                请立即举报！
              </div>
              <img class="safe-icon" src="../../assets/images/job/safe.png" alt="" />
            </div>
          </div>
          <!-- 企业地址 -->
          <div class="row-item">
            <div class="title">企业地址</div>
            <div class="company-address">
              <div class="item">
                <span class="position-icon"></span>
                {{ jobInfo.workAddress }}
              </div>
            </div>
          </div>
        <SameJob ref="sameJob" />
        <!-- 联系信息 -->
        <!-- <div class="row-item">
          <div class="title">联系信息</div>
          <div class="info_row">
            <div><span>联系人</span>{{companyInfo.applyUserName}}</div>
            <div><span>手机号码</span>{{companyInfo.phoneNumber}}</div>
                  <div><span>邮箱地址</span>{{companyInfo.email}}</div>
                </div>
              </div> -->
        </section>
      </section>
      <div class="zzc" v-if="show1 || show2 || show3">
        <div class="box" v-if="show1">
          <div class="content">
            <i class="el-icon-s-order"></i>
            <span class="link" @click="toLink('resumeReview')">点击查看简历内容</span>
          </div>
          <div class="btnRow">
            <div class="btns btnLeft" @click="cancel">取消</div>
            <div class="btns" @click="confirm">确认投递</div>
          </div>
        </div>
        <div class="box box2" v-if="show3">
          <div class="titles">请选择简历模板</div>
          <div class="rows">
            <div class="noDatas" v-if="curriculumList.length <= 0" @click="linkTo('resumeReview')">
              还没有简历模板？去添加
            </div>
            <div class="items" v-else v-for="(item, index) in curriculumList" :key="index" @click="chooseItem(item.id)">
              <i class="el-icon-success" v-if="chooseId == item.id" style="color: #4677b9"></i>
              <i class="noChoose" v-else></i>
              {{ item.name || `模板${index + 1}` }}
              <span @click="openResume(item)">查看</span>
            </div>
          </div>
          <div class="btnRow">
            <div class="btns btnLeft" @click="show3 = false">取消</div>
            <div class="btns" @click="confirm2" v-if="curriculumList.length > 0">
              确认投递
            </div>
          </div>
        </div>
        <div class="box" v-if="show2">
        <div class="content">
          <span class="black" v-if="authenticateStatus !== 1">请前往身份认证以开通简历投递功能</span>
          <!-- <span class="black" v-else-if="!userName || !email"
            >请完善个人信息以开通简历投递功能</span
          >
                <span class="black" v-else-if="!curriculumId"
                  >请前完善个人简历以开通简历投递功能</span
                > -->
          </div>
          <div class="btnRow">
            <div class="btns btnLeft" @click="cancel">取消</div>
            <div class="btns" v-if="authenticateStatus != 1" @click="toLink('auditId')">
              前往认证
            </div>
            <div class="btns" v-else-if="!userName || !email" @click="toLink('userInfo')">
              完善信息
            </div>
            <div class="btns" v-else-if="!curriculumId" @click="toLink('resumeEdit')">
              完善简历
            </div>
          </div>
        </div>
      </div>
      <el-drawer title="简历预览" size="80%" :visible.sync="openResumeDialog" direction="rtl" style="z-index: 99999"
        :append-to-body="true">
        <ResumeReview :hideEdit="true" ref="ResumeReview" />
      </el-drawer>
    </PageCom>

    <PageCom class="t_show_page" :showHeader="'display: none;'" :showTop="'padding-top: 0'">
      <section class="pc-review-page">
        <div class="nav-com">
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 20px">
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'hire' }">招聘专区</el-breadcrumb-item>
            <el-breadcrumb-item :repalce="true" :to="{ name: 'company', query: { id: $route.query.companyId } }"
              v-if="$route.query.companyId">企业详情</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'jobList' }" v-else>职位列表</el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{ $route.meta.title || "--" }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 公司基本信息 -->
        <div class="job-info">
          <div class="row1">
            <div class="left">
              <div class="row1-1">
                <span class="title">{{ jobInfo.jobName }}</span>
                <span class="strong">{{ jobInfo.lowestSalary || 0 }}-{{
                  jobInfo.highestSalary || 0
                }}元/天</span>
                <span class="normal">招聘人数：{{ jobInfo.recruitmentCount || 0 }}</span>
                <span class="normal">工作语言：{{ jobInfo.jobLanguage || "中文" }}</span>
              </div>
              <div class="t_row2 row2">
                <span class="normal">招聘人数：{{ jobInfo.recruitmentCount || 0 }}</span>
                <span class="normal">工作语言：{{ jobInfo.jobLanguage || "中文" }}</span>
              </div>
              <div class="row2">
                <span v-if="jobInfo.city">{{ jobInfo.city }}</span>
                <span class="line" v-if="jobInfo.practicePeriod || jobInfo.workPeriod" />
                <span v-if="jobInfo.practicePeriod">{{ jobInfo.practicePeriod }}个月</span>
                <span class="line" v-if="jobInfo.workPeriod" />
                <span v-if="jobInfo.workPeriod">{{ jobInfo.workPeriod }}</span>
                <span class="line" v-if="jobInfo.education" />
                <span v-if="jobInfo.education">{{ jobInfo.education }}</span>
                <span class="line" v-if="jobInfo.identify"></span>
                <span v-if="jobInfo.identify">{{
                  ["在校", "应届"][jobInfo.identify]
                }}</span>
              </div>
              <div class="row3">
                <div class="tag" v-for="(item, index) in jobInfo.welfareTags" :key="index">
                  {{ item }}
                </div>
              </div>
            </div>
            <div class="right-hire">
              <div class="t_strong strong">{{ jobInfo.lowestSalary || 0 }}-{{
                jobInfo.highestSalary || 0
              }}元/天</div>
              <div class="row1">发布时间：{{ jobInfo.updateTime }}</div>
              <div class="row2">点击量：{{ jobInfo.clickCount }}</div>
              <div class="collectStatus" @click="changeCollectStatus">
                <img src="../../assets/images/collection.png" v-if="!collectStatus" />
                <img src="../../assets/images/collection_active.png" v-else />
                <span v-if="!collectStatus">收藏</span>
                <span v-else style="color: #fc9c21">收藏中</span>
              </div>
            </div>
          </div>

          <div class="row4">
            <img class="logo" :src="companyInfo.companyLogo" v-imgError alt="logo" />
            <div class="right-block" @click="linkTo('company', jobInfo.companyId)">
              <div class="name">{{ companyInfo.companyName }}</div>
              <div class="area">{{ companyInfo.industry }}</div>
            </div>
        </div>

          <!-- <div class="btn edit" @click="toLink('resumeEdit')">
                <span class="edit-icon"></span>填写简历
              </div> -->
          <div class="btn send" :class="[isSend ? 'disabled' : '']" @click="showZzc">
            <span class="send-icon"></span>{{ isSend ? "您已投递" : "投递简历" }}
          </div>
        </div>
        <div class="t_btn_box">
          <div class="t_btn t_send" :class="[isSend ? 'disabled' : '']" @click="showZzc">
            <span class="t_send-icon"></span>{{ isSend ? "您已投递" : "投递简历" }}
          </div>
        </div>

        <section>

          <!-- 职位描述 -->
          <div class="row-item">
            <div class="title">职位描述 <span class="t_row1 row1">发布时间：{{ jobInfo.updateTime }}</span></div>
            <div class="t_row3 row3">
              <div class="tag" v-for="(item, index) in jobInfo.welfareTags" :key="index">
                {{ item }}
              </div>
            </div>
            <div class="company-desc" v-if="jobInfo.jobDescription"
              v-html="jobInfo.jobDescription.replace(/\n/gm, '<br>')">
            </div>
          </div>
          <!-- 平台简介 -->
          <div class="row-item">
            <div class="title">{{ jobInfo.companyName }}简介</div>
            <div class="company-desc" v-if="companyInfo.introduction"
              v-html="companyInfo.introduction.replace(/\n/gm, '<br>')"></div>
            <!-- todo 点击安全提示，跳转防骗指南 -->
            <div class="safe-tips">
              <div class="title">安全提示</div>
              <div class="text">
                数据学徒实习平台严禁用人单位做出任何损害求职者合法权益的违法违规行为，包括但不限于扣押求职者证件、收取求职者财物、向求职者集资、让求职者入股、诱导求职者异地入职、异地参与培训等，如您一旦发现此类行为，
                请立即举报！
              </div>
              <img class="safe-icon" src="../../assets/images/job/safe.png" alt="" />
            </div>
          </div>
          <!-- 企业地址 -->
          <div class="row-item">
            <div class="title">企业地址</div>
            <div class="company-address">
              <div class="item">
                <span class="position-icon"></span>
                {{ jobInfo.workAddress }}
              </div>
            </div>
          </div>
        <SameJob ref="sameJob" />
        <!-- 联系信息 -->
        <!-- <div class="row-item">
          <div class="title">联系信息</div>
          <div class="info_row">
            <div><span>联系人</span>{{companyInfo.applyUserName}}</div>
            <div><span>手机号码</span>{{companyInfo.phoneNumber}}</div>
                  <div><span>邮箱地址</span>{{companyInfo.email}}</div>
                </div>
              </div> -->
        </section>
      </section>
      <div class="zzc" v-if="show1 || show2 || show3">
        <div class="box" v-if="show1">
          <div class="content">
            <i class="el-icon-s-order"></i>
            <span class="link" @click="toLink('resumeReview')">点击查看简历内容</span>
          </div>
          <div class="btnRow">
            <div class="btns btnLeft" @click="cancel">取消</div>
            <div class="btns" @click="confirm">确认投递</div>
          </div>
        </div>
        <div class="box box2" v-if="show3">
          <div class="titles">请选择简历模板</div>
          <div class="rows">
            <div class="noDatas" v-if="curriculumList.length <= 0" @click="linkTo('resumeReview')">
              还没有简历模板？去添加
            </div>
            <div class="items" v-else v-for="(item, index) in curriculumList" :key="index" @click="chooseItem(item.id)">
              <i class="el-icon-success" v-if="chooseId == item.id" style="color: #4677b9"></i>
              <i class="noChoose" v-else></i>
              {{ item.name || `模板${index + 1}` }}
              <span @click="TopenResume(item, index)">查看</span>
            </div>
          </div>
          <div class="btnRow">
            <div class="btns btnLeft" @click="show3 = false">取消</div>
            <div class="btns" @click="confirm2" v-if="curriculumList.length > 0">
              确认投递
            </div>
          </div>
        </div>
        <div class="box" v-if="show2">
        <div class="content">
          <span class="black" v-if="authenticateStatus !== 1">请前往身份认证以开通简历投递功能</span>
          <!-- <span class="black" v-else-if="!userName || !email"
            >请完善个人信息以开通简历投递功能</span
          >
                <span class="black" v-else-if="!curriculumId"
                  >请前完善个人简历以开通简历投递功能</span
                > -->
          </div>
          <div class="btnRow">
            <div class="btns btnLeft" @click="cancel">取消</div>
            <div class="btns" v-if="authenticateStatus != 1" @click="toLink('auditId')">
              前往认证
            </div>
            <div class="btns" v-else-if="!userName || !email" @click="toLink('userInfo')">
              完善信息
            </div>
            <div class="btns" v-else-if="!curriculumId" @click="toLink('resumeEdit')">
              完善简历
            </div>
          </div>
        </div>
      </div>
      <el-drawer title="简历预览" size="98%" :visible.sync="TopenResumeDialog" direction="rtl" style="z-index: 99999"
        :append-to-body="true">
        <div style="height: 0.4rem; padding-left: 0.1rem; color: #3d6cb0; font-size: 0.14rem;" @click="gotResume">编辑简历
        </div>
        <TResumeReview :hideEdit="true" :TcurrentIndex="TcurrentIndex" ref="TResumeReview" />
      </el-drawer>
    </PageCom>
  </div>
</template>

<script>
import PageCom from "@/components/page/index.vue";
import ResumeReview from "../userCenter/components/resumeReview.vue";
import TResumeReview from "../userCenter/resumeReview.vue";
import {
  getJobInfo,
  isSend,
  getCompanyInfo,
  sendVitae,
  getStudentCurriculumVitaeBylogin,
  isCollectJob,
  createOrUpdateCollectJob,
} from "../../request/api";
import { getEducationName, getWorkPeriodName } from "../../utils/frontDataDict";
import { formatTime } from "../../utils/utils";
import { mapState } from "vuex";
import SameJob from "./components/sameJobRecomend.vue";
export default {
  name: "jobDetail",
  data() {
    return {
      TcurrentIndex: 0,
      TcurrentItem: {},
      showSameJob: false,
      isSend: false,
      jobInfo: {},
      companyInfo: {},
      show1: false,
      show2: false,
      show3: false,
      chooseId: null,
      openResumeDialog: false,
      TopenResumeDialog: false,
      curriculumList: [],
      collectStatus: false,
    };
  },
  components: {
    PageCom,
    ResumeReview,
    TResumeReview,
    SameJob,
  },
  computed: {
    ...mapState([
      "authenticateStatus",
      "userName",
      "userId",
      "email",
      "curriculumId",
      "isChina",
      "USER_INFO",
    ]),
  },
  mounted() {
    this.init();
  },
  watch: {
    $route(to, from) {
      if (to.params.id || localStorage.getItem("currentJobId")) {
        this.init();
      }
    },
  },
  methods: {
    linkTo(routeName, id) {
      if (routeName == "resumeReview") {
        this.$router.push({ name: routeName, query: { index: id } });
        return;
      }
      this.$router.push({ name: routeName, query: { id: id } });
    },
    openResume(item) {
      this.openResumeDialog = true;
      setTimeout(() => {
        this.$refs.ResumeReview.open(item);
      });
    },
    gotResume() {
      this.$router.push({ name: 'resumeEdit', query: { id: this.TcurrentItem.id } })
    },
    TopenResume(item, index) {
      this.TopenResumeDialog = true;
      this.TcurrentIndex = index
      this.TcurrentItem = item
      console.log(item)
      // setTimeout(() => {
      // this.$refs.TResumeReview.open(item);
      // });
    },
    toLink(name) {
      this.$router.push({ name });
    },
    confirm() {
      this.show1 = false;
      let falg = Number(this.authenticateStatus) === 1;
      if (!this.isChina && this.USER_INFO.isRealName != "yes" && falg) {
        this.$message({
          message: `身份认证中，请前往邮箱认证：${this.USER_INFO.email}`,
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (falg) {
        //判断用户身份是否认证
        this.show3 = true;
        // this.submit();
      } else {
        this.show2 = true;
      }
    },
    showZzc() {
      let status = Number(this.authenticateStatus);
      if (!this.isChina && this.USER_INFO.isRealName != "yes" && status === 1) {
        this.$message({
          message: `身份认证中，请前往邮箱认证：${this.USER_INFO.email}`,
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (status === 3) {
        this.$message({
          message: "身份认证中，请梢后通过重试",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      if (status !== 1) {
        this.show2 = true;
        return;
      }
      if (this.isSend) return;
      this.show3 = true;
    },
    cancel() {
      if (this.show2) {
        this.show1 = false;
        this.show2 = false;
        return;
      }
      this.show1 = false;
    },
    submit() {
      // if (this.isSend)
      sendVitae({
        userId: this.userId,
        jobId: this.jobInfo.id,
        resumeId: this.chooseId,
      }).then((res) => {
        if (res.data) {
          this.isSend = true;
          this.$message({
            message: "简历投递成功",
            type: "success",
          });
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    confirm2() {
      if (!this.chooseId) {
        this.$message.error("请选择简历模板");
        return;
      }
      this.show3 = false;
      this.submit();
    },
    chooseItem(id) {
      if (id == this.chooseId) return;
      this.chooseId = id;
    },

    changeCollectStatus() {
      let id = Number(
        this.$route.params?.id || localStorage.getItem("currentJobId")
      );
      createOrUpdateCollectJob({
        status: this.collectStatus ? "0" : "1",
        jobId: id,
        city: this.jobInfo.city,
        studentId: this.USER_INFO.id,
      }).then((res) => {
        if (res.data) {
          this.collectStatus = !this.collectStatus;
        }
      });
    },
    init() {
      let id = this.$route.params?.id || localStorage.getItem("currentJobId");
      localStorage.getItem("shareJobId") &&
        localStorage.removeItem("shareJobId"); //是分享进来的就去清掉这个缓存
      getStudentCurriculumVitaeBylogin().then((res) => {
        if (res.data && res.data.length > 0) {
          this.curriculumList = res.data;
        }
      });
      getJobInfo({
        id,
      }).then((res) => {
        if (res.data) {
          isSend({
            jobId: res.data.id,
          }).then((res) => {
            this.isSend = res.data;
          });
          try {
            res.data.education = getEducationName(res.data.education, true);
          } catch {
            () => { };
          }
          try {
            if (Array.isArray(JSON.parse(res.data.industry))) {
              if (res.data.industry) {
                this.$refs.sameJob && this.$refs.sameJob.init(res.data);
              }
              res.data.industry = JSON.parse(res.data.industry)[1];
            }
            if (Array.isArray(JSON.parse(res.data.city))) {
              res.data.city = JSON.parse(res.data.city)[1];
            }
          } catch {
            () => { };
          }
          try {
            if (Array.isArray(JSON.parse(res.data.welfareTags))) {
              res.data.welfareTags = JSON.parse(res.data.welfareTags);
            }
          } catch {
            () => { };
          }
          res.data.updateTime &&
            (res.data.updateTime = formatTime(new Date(res.data.updateTime)));
          res.data.workPeriod &&
            (res.data.workPeriod = getWorkPeriodName(res.data.workPeriod));
          this.jobInfo = res.data;

          res.data.companyId &&
            getCompanyInfo({
              id: res.data.companyId,
            }).then((vv) => {
              if (vv.data) {
                try {
                  if (Array.isArray(JSON.parse(vv.data.companyAddress))) {
                    vv.data.companyAddress = JSON.parse(vv.data.companyAddress);
                  }
                } catch {
                  () => { };
                }
                try {
                  vv.data.industry = JSON.parse(vv.data.industry);
                  if (Array.isArray(vv.data.industry)) {
                    vv.data.industry =
                      vv.data.industry[vv.data.industry.length - 1];
                  }
                } catch { }
                this.companyInfo = vv.data;
              }
            });
          setTimeout(() => {
            let el = document.getElementsByClassName("content-page-com");
            el && el[0] && (el[0].scrollTop = 0);
          });

          isCollectJob({
            //判断该企业是否被收藏
            jobId: id,
            studentId: this.USER_INFO.id,
          }).then((res) => {
            this.collectStatus = res.data;
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.pc_show_page {
  display: block;
}

.t_show_page {
  display: none;
}

.zzc {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 5;

  .box {
    width: 312px;
    height: 222px;
    background: #ffffff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-sizing: border-box;
    padding: 20px;
    padding-bottom: 75px;
    border-radius: 12px;

    &.box2 {
      height: auto;
    }

    .titles {
      font-size: 18px;
      display: flex;
      justify-content: space-between;
    }

    .rows {
      width: 100%;
      padding: 9px 5px;

      .noDatas {
        font-size: 14px;
        font-weight: 500;
        text-align: center;
        padding: 15px 0;
        cursor: pointer;
        color: #4677b9;
      }

      .items {
        width: 100%;
        cursor: pointer;
        position: relative;
        height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 17px;
        flex-wrap: wrap;
        font-size: 14px;
        font-weight: 500;
        padding-left: 27px;

        span {
          cursor: pointer;
          color: #4677b9;
        }

        i {
          font-size: 21px;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);

          &.noChoose {
            width: 18px;
            height: 18px;
            border: 1px solid #9597a0;
            border-radius: 50%;
          }
        }
      }
    }

    .content {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #2f8efe;
      font-size: 16px;

      i {
        font-size: 30px;
        margin-right: 5px;
      }

      .link {
        text-decoration: underline;
        cursor: pointer;
      }

      .black {
        color: #37383d;
      }
    }

    .btnRow {
      width: 100%;
      position: absolute;
      height: 38px;
      left: 0;
      bottom: 20px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 0 20px;

      .btns {
        width: calc((100% - 12px) / 2);
        cursor: pointer;
        height: 100%;
        font-size: 14px;
        font-weight: 500;
        background-color: #4677b9;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;

        &.btnLeft {
          background-color: #fff;
          color: #4677b9;
          border: 1px solid #4677b9;
        }
      }
    }
  }
}

.pc-review-page {
  position: relative;
  background: #fff;

  .job-info {
    position: relative;
    width: 100%;
    background: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #f0f0f0;
    padding: 20px 20px 20px;
    margin-bottom: 30px;

    .row1 {
      display: flex;
      flex-flow: row nowrap;

      .left {
        flex: 1;

        .row1-1 {
          margin-bottom: 14px;

          .title {
            font-size: 26px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #37383d;
            line-height: 37px;
            margin-right: 12px;
            vertical-align: bottom;
          }

          .strong {
            font-size: 18px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #9597a0;
            line-height: 25px;
            margin-right: 21px;
          }

          .normal {
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 25px;
            vertical-align: bottom;
            margin-right: 21px;
          }
        }

        .t_row2 {
          display: none;
        }
      }

      .right-hire {
        position: relative;
        max-width: 200px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 17px;
        padding: 0;

        .row1 {
          width: 100%;
          margin-bottom: 10px;
          text-align: right;
        }

        .t_strong {
          display: none;
        }

        .row2 {
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 17px;
          text-align: right;
        }

        .collectStatus {
          height: 20px;
          display: flex;
          align-items: center;
          width: 100%;
          cursor: pointer;
          justify-content: end;

          img {
            width: 20px;
            height: 20px;
            margin-right: 3px;
          }

          span {
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
          }
        }
      }
    }

    .row2 {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9597a0;
      line-height: 20px;
      margin-bottom: 15px;

      .line {
        display: inline-block;
        width: 1px;
        height: 10px;
        background: #9ca8be;
        margin: 0 12px;
      }
    }

    .row3 {
      position: relative;
      margin-bottom: 15px;

      .tag {
        display: inline-block;
        background: rgba(47, 142, 254, 0.07);
        border-radius: 6px;
        border: 1px solid #2f8efe;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2f8efe;
        line-height: 32px;
        text-align: center;
        padding: 0 10px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
    }

    .row4 {
      position: relative;
      overflow: hidden;

      .logo {
        display: block;
        width: 60px;
        height: 60px;
        float: left;
        background: #ffffff;
        border-radius: 6px;
        margin-right: 18px;
      }

      .right-block {
        position: relative;
        height: 60px;
        overflow: hidden;
        cursor: pointer;
        display: flex;
        flex-flow: column nowrap;
        justify-content: space-between;

        .name {
          font-size: 22px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #37383d;
          line-height: 30px;
          margin-bottom: 10px;
        }

        .area {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 22px;
        }
      }
    }

    .btn {
      display: flex;
      width: 146px;
      height: 44px;
      background: #3d6cb0;
      border-radius: 40px;
      background: #3d6cb0;
      border-radius: 20px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      justify-content: center;
      align-items: center;
      color: #ffffff;
      cursor: pointer;

      .edit-icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 8px;
        background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
      }

      .send-icon {
        display: inline-block;
        width: 18px;
        height: 16px;
        margin-right: 8px;
        background: url("../../assets/images/job/send.png") no-repeat center center / cover;
      }
    }

    .edit {
      position: absolute;
      right: 200px;
      bottom: 50px;

      &:hover {
        color: #2f8efe;
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
      }
    }

    .send {
      position: absolute;
      right: 20px;
      bottom: 32px;

      &.disabled {
        background: #ccc;
        cursor: not-allowed;

        &:hover {
          color: #fff;
          box-shadow: none;
        }
      }

      &:hover {
        color: #2f8efe;
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
      }
    }
  }

  .t_send {
    display: none;
  }

  .row-item {
    position: relative;
    width: 100%;
    padding: 15px 0 20px;
    border-bottom: 1px solid #d4d6da;

    &:last-child {
      border-bottom: 1px solid #fff;
    }

    // t
    .t_row3 {
      display: none;
    }

    .title {
      position: relative;
      text-align: left;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #37383d;
      line-height: 25px;
      margin-bottom: 14px;

      .t_row1 {
        display: none;
      }

      .all {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2f8efe;
        line-height: 33px;
        vertical-align: bottom;
        cursor: pointer;

        .all-icon {
          display: inline-block;
          width: 32px;
          height: 32px;
          background: url("../../assets/images/check_all.png") no-repeat center center / cover;
          vertical-align: bottom;
          margin-right: 15px;
        }
      }
    }

    .info_row {
      margin-top: 10px;

      div {
        position: relative;
        padding-left: 100px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 22px;
        margin-bottom: 24px;
        min-height: 22px;
      }

      span {
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 22px;
      }
    }

    .job-item {
      position: relative;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #d4d6da;
      padding: 25px;
      cursor: pointer;

      .job-name {
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383d;
        line-height: 30px;
        margin-bottom: 15px;

        .salary {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 40px;
          float: right;
        }
      }

      .other {
        font-size: 22px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 30px;

        .line {
          position: relative;
          display: inline-block;
          width: 1px;
          height: 14px;
          background: #9597a0;
          margin: 0 18px;
        }
      }
    }

    .company-desc {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1c1c1c;
      line-height: 32px;
      word-break: break-all;
    }

    .company-address {
      position: relative;

      .item {
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        margin-top: 15px;
        line-height: 30px;
        cursor: pointer;

        &:first-child {
          margin-top: 0;
        }

        .position-icon {
          position: relative;
          top: -2px;
          display: inline-block;
          width: 16px;
          height: 20px;
          margin-right: 10px;
          background: url("../../assets/images/position.png") no-repeat center center / cover;
          vertical-align: middle;
        }
      }
    }

    .safe-tips {
      position: relative;
      padding: 15px 185px 15px 15px;
      background: #ffffff;
      border-radius: 10px;
      border: 1px solid #d4d6da;
      margin-top: 20px;

      .title {
        font-size: 22px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2f8efe;
        line-height: 30px;
        margin-bottom: 12px;
      }

      .text {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 27px;
      }

      .safe-icon {
        position: absolute;
        right: 34px;
        top: 50%;
        transform: translateY(-50%);
        // margin-top: -66px;
        width: 79px;
        height: 79px;
      }
    }

    .contact-row {
      position: relative;
      margin-bottom: 35px;

      .left {
        display: inline-block;
        width: 168px;
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 33px;
      }

      .right {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #37383d;
        line-height: 33px;
      }
    }
  }
}

/deep/ .el-breadcrumb__inner {
  font-size: 15px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 21px;
  cursor: pointer;
}

@media screen and (max-width: 480px) {
  .pc_show_page {
    display: none;
  }

  .t_show_page {
    display: block;
  }

  .zzc {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5;

    .box {
      width: 312px;
      height: 222px;
      background: #ffffff;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      box-sizing: border-box;
      padding: 20px;
      padding-bottom: 75px;
      border-radius: 12px;

      &.box2 {
        height: auto;
      }

      .titles {
        font-size: 18px;
        display: flex;
        justify-content: space-between;
      }

      .rows {
        width: 100%;
        padding: 9px 5px;

        .noDatas {
          font-size: 14px;
          font-weight: 500;
          text-align: center;
          padding: 15px 0;
          cursor: pointer;
          color: #4677b9;
        }

        .items {
          width: 100%;
          cursor: pointer;
          position: relative;
          height: 35px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          line-height: 17px;
          flex-wrap: wrap;
          font-size: 14px;
          font-weight: 500;
          padding-left: 27px;

          span {
            cursor: pointer;
            color: #4677b9;
          }

          i {
            font-size: 21px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);

            &.noChoose {
              width: 18px;
              height: 18px;
              border: 1px solid #9597a0;
              border-radius: 50%;
            }
          }
        }
      }

      .content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #2f8efe;
        font-size: 16px;

        i {
          font-size: 30px;
          margin-right: 5px;
        }

        .link {
          text-decoration: underline;
          cursor: pointer;
        }

        .black {
          color: #37383d;
        }
      }

      .btnRow {
        width: 100%;
        position: absolute;
        height: 38px;
        left: 0;
        bottom: 20px;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 20px;

        .btns {
          width: calc((100% - 12px) / 2);
          cursor: pointer;
          height: 100%;
          font-size: 14px;
          font-weight: 500;
          background-color: #4677b9;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 2px;

          &.btnLeft {
            background-color: #fff;
            color: #4677b9;
            border: 1px solid #4677b9;
          }
        }
      }
    }
  }

  .pc-review-page {
    position: relative;
    background: #fff;
    margin-top: 6px;

    .nav-com {
      display: none;
    }

    .job-info {
      position: relative;
      width: 100%;
      background: #fff;
      border-radius: 0;
      border: 0;
      padding: 0;
      margin-bottom: 0;
      padding-bottom: 15px;
      border-bottom: 1px solid #f1f1f1;

      .row1 {
        display: flex;
        flex-flow: row nowrap;
        margin-bottom: 15px;

        .left {
          flex: 1;

          .row1-1 {
            margin-bottom: 14px;

            .title {
              font-size: 22px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #37383d;
              line-height: 30px;
              margin-right: 12px;
              vertical-align: bottom;
            }

            .strong {
              display: none;
              font-size: 18px;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: #9597a0;
              line-height: 25px;
              margin-right: 21px;
            }

            .normal {
              display: none;
              font-size: 18px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9597a0;
              line-height: 25px;
              vertical-align: bottom;
              margin-right: 21px;
            }
          }

          .t_row2 {
            display: block;
          }
        }

        .right-hire {
          position: relative;
          max-width: 200px;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 17px;
          padding: 0;

          .t_strong {
            display: block;
            margin-bottom: 2px;
          }

          .strong {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #37383D;
            line-height: 30px;
            text-align: right;
          }

          .row1 {
            display: none;
            width: 100%;
            margin-bottom: 10px;
            text-align: right;
          }

          .row2 {
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 17px;
            text-align: right;
          }

          .collectStatus {
            height: 20px;
            display: flex;
            align-items: center;
            width: 100%;
            cursor: pointer;
            justify-content: end;

            img {
              width: 15px;
              height: 15px;
              margin-right: 5px;
            }

            span {
              font-size: 15px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9597a0;
              line-height: 21px;
            }
          }
        }
      }

      .row2 {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597a0;
        line-height: 20px;
        margin-bottom: 8px;

        .line {
          display: inline-block;
          width: 1px;
          height: 10px;
          background: #9ca8be;
          margin: 0 8px;
        }
      }

      .row3 {
        display: none;
        position: relative;
        margin-bottom: 15px;

        .tag {
          display: inline-block;
          background: rgba(47, 142, 254, 0.07);
          border-radius: 6px;
          border: 1px solid #2f8efe;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2f8efe;
          line-height: 32px;
          text-align: center;
          padding: 0 10px;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }

      .row4 {
        position: relative;
        overflow: hidden;

        .logo {
          display: block;
          width: 52px;
          height: 52px;
          float: left;
          background: #ffffff;
          border-radius: 6px;
          margin-right: 18px;
          border-radius: 4px;
          border: 1px solid #D4D6DA;
        }

        .right-block {
          position: relative;
          height: auto;
          overflow: hidden;
          cursor: pointer;
          display: flex;
          flex-flow: column nowrap;
          justify-content: space-between;

          .name {
            font-size: 18px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #37383d;
            line-height: 25px;
            margin-bottom: 2px;
          }

          .area {
            font-size: 13px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 18px;
          }
        }
      }

      .btn {
        display: flex;
        width: 146px;
        height: 44px;
        background: #3d6cb0;
        border-radius: 40px;
        background: #3d6cb0;
        border-radius: 20px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        cursor: pointer;

        .edit-icon {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 8px;
          background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
        }

        .send-icon {
          display: inline-block;
          width: 18px;
          height: 16px;
          margin-right: 8px;
          background: url("../../assets/images/job/send.png") no-repeat center center / cover;
        }
      }

      .edit {
        position: absolute;
        right: 200px;
        bottom: 50px;

        &:hover {
          color: #2f8efe;
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        }
      }

      .send {
        display: none;
        position: absolute;
        right: 20px;
        bottom: 32px;

        &.disabled {
          background: #ccc;
          cursor: not-allowed;

          &:hover {
            color: #fff;
            box-shadow: none;
          }
        }

        &:hover {
          color: #2f8efe;
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        }
      }
    }

    ///
    .t_btn_box {
      display: flex;
      padding: 10px 0;

      .t_btn {
        flex: 1;
        display: flex;
        width: 172px;
        height: 44px;
        background: #3d6cb0;
        border-radius: 4px;
        background: #3d6cb0;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        cursor: pointer;

        .t_edit-icon {
          display: inline-block;
          width: 16px;
          height: 16px;
          margin-right: 8px;
          background: url("../../assets/images/edit-icon.png") no-repeat center center / cover;
        }

        .t_send-icon {
          display: inline-block;
          width: 18px;
          height: 16px;
          margin-right: 8px;
          background: url("../../assets/images/job/send.png") no-repeat center center / cover;
        }
      }

      .t_edit {
        position: absolute;
        right: 200px;
        bottom: 50px;

        &:hover {
          color: #2f8efe;
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        }
      }

      .t_send {

        // display: none;
        // position: absolute;
        // right: 20px;
        // bottom: 32px;
        &.disabled {
          background: #ccc;
          cursor: not-allowed;

          &:hover {
            color: #fff;
            box-shadow: none;
          }
        }

        &:hover {
          color: #2f8efe;
          box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.08);
        }
      }
    }

    .row-item {
      position: relative;
      width: 100%;
      padding: 15px 0 20px;
      border-bottom: 1px solid #d4d6da;

      &:last-child {
        border-bottom: 1px solid #fff;
      }

      .row3 {
        position: relative;
        margin-bottom: 2px;

        .tag {
          display: inline-block;
          height: 28px;
          background: rgba(47, 142, 254, 0.07);
          border-radius: 2px;
          border: 1px solid #2f8efe;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2f8efe;
          line-height: 26px;
          text-align: center;
          padding: 0 10px;
          // margin: 0 auto;
          margin-right: 10px;
          margin-bottom: 10px;
        }
      }

      .title {
        position: relative;
        text-align: left;
        // font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        // color: #37383d;
        line-height: 25px;
        margin-bottom: 14px;
        font-size: 16px;
        color: #37383D;
        line-height: 22px;

        .t_row1 {
          display: inline-block;
        }

        .row1 {
          position: absolute;
          right: 0;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597A0;
          line-height: 17px;
        }

        .all {
          position: absolute;
          right: 0;
          bottom: 0;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #2f8efe;
          line-height: 33px;
          vertical-align: bottom;
          cursor: pointer;

          .all-icon {
            display: inline-block;
            width: 32px;
            height: 32px;
            background: url("../../assets/images/check_all.png") no-repeat center center / cover;
            vertical-align: bottom;
            margin-right: 15px;
          }
        }
      }

      .info_row {
        margin-top: 10px;

        div {
          position: relative;
          padding-left: 100px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 22px;
          margin-bottom: 24px;
          min-height: 22px;
        }

        span {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 22px;
        }
      }

      .job-item {
        position: relative;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid #d4d6da;
        padding: 25px;
        cursor: pointer;

        .job-name {
          font-size: 22px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #37383d;
          line-height: 30px;
          margin-bottom: 15px;

          .salary {
            font-size: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #9597a0;
            line-height: 40px;
            float: right;
          }
        }

        .other {
          font-size: 22px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 30px;

          .line {
            position: relative;
            display: inline-block;
            width: 1px;
            height: 14px;
            background: #9597a0;
            margin: 0 18px;
          }
        }
      }

      .company-desc {
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        word-break: break-all;
        font-size: 13px;
        color: #9597A0;
        line-height: 23px;
      }

      .company-address {
        position: relative;

        .item {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          margin-top: 15px;
          line-height: 20px;
          cursor: pointer;

          &:first-child {
            margin-top: 0;
          }

          .position-icon {
            position: relative;
            top: -2px;
            display: inline-block;
            width: 12px;
            height: 14px;
            margin-left: 3px;
            margin-right: 10px;
            background: url("../../assets/images/position.png") no-repeat center center / cover;
            vertical-align: middle;
          }
        }
      }

      .safe-tips {
        // position: relative;
        padding: 12px 12px 18px;
        background: #ffffff;
        border: 1px solid #d4d6da;
        margin-top: 20px;
        border-radius: 4px;

        .title {
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #2f8efe;
          margin-bottom: 10px;
          font-size: 16px;
          line-height: 22px;
        }

        .text {
          width: 264px;
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 16px;

        }

        .safe-icon {
          position: absolute;
          right: 19px;
          top: 50%;
          transform: translateY(-50%);
          // margin-top: -66px;
          width: 44px;
          height: 48px;
        }
      }

      .contact-row {
        position: relative;
        margin-bottom: 35px;

        .left {
          display: inline-block;
          width: 168px;
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #9597a0;
          line-height: 33px;
        }

        .right {
          font-size: 24px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #37383d;
          line-height: 33px;
        }
      }
    }
  }
}</style>
